<template>
  <div class="container">
    <!-- 文章分类栏 -->
    <van-tabs swipeable @change="swichTab" v-model="articleIndex">
      <van-tab :key="item.id" v-for="item in channelList" :title="item.name">
        <!-- 对应的新闻列表 -->
        <!-- 通过当前频道对应的id给子组件传入id -->
          <Article :channelId="item.id" ref="alist"></Article>
        <!-- / 对应的新闻列表 -->
      </van-tab>
    </van-tabs>
    <!-- 右侧图标 -->
    <span class="bar_btn">
      <van-icon name="wap-nav" @click="openChannelList"></van-icon>
    </span>
    <!--
      使用子组件,
       1. 向子组件传入当前登录账号的频道列表
       2. 向子组件传递当前选中的文章的索引值
     -->
    <ArticleChannelList  v-model="isShowChannel" :channelList="channelList" :articleIndex.sync="articleIndex"/>
  </div>
</template>

<script>
// 导入api函数接口，获取频道列表
import { getChannel } from '@/api/channel'
// 在父组件引用子组件
import Article from './article'
// 引用频道列表的子组件
import ArticleChannelList from './components/channel-edit'
export default {
  name: 'home-index',
  // 注册子组件
  components: {
    Article,
    ArticleChannelList
  },
  data () {
    return {
      channelList: [], // 频道数据列表
      isShowChannel: false, // 子组件弹框显示与否
      articleIndex: 0 // 当前切换标签栏的索引值
    }
  },
  // 处理refresh_token失效，回跳缓存不刷新问题
  watch: {
    '$store.state.user.refresh_token' () {
      console.log('refresh')
      this.getChannel()
    }
  },
  methods: {
    // 发送axios接口，获取异步数据
    async getChannel () {
      // 解构需要的data，utiles/request
      const { data } = await getChannel()
      // console.log(data)
      // 获取到数据给频道数据列表赋值
      this.channelList = data.channels
    },
    // 注册点击事件，点击图标显示我的频道列表
    openChannelList () {
      this.isShowChannel = true
    },
    // 当标签栏切换时触发的函数
    swichTab (i) {
      // 将当前切换的索引值传送给子组件
      this.articleIndex = i
      // i 代表当前标签栏的索引值
      // console.log(i, this.$refs.alist)
      /**
       * 使用$refs获取子组件的实例方法，调用子组件方法，定位到当前滚动的位置
      */
      // eslint-disable-next-line no-unused-expressions
      this.$refs.alist[i]?.refScrollTop()
    }
  },
  // 在created钩子函数中调用获取频道数据的方法
  created () {
    this.getChannel()
  }
}
</script>

<style scoped lang='less'>
// 文章频道样式
.van-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
  /deep/ .van-tabs__wrap {
    height: 36px;
    padding-right: 36px;
    .van-tab {
      line-height: 36px;
    }
    .van-tabs__line {
      background-color: #d43d3d;
      height: 2px;
    }
  }
  /deep/ .van-tabs__content {
    flex: 1;
    overflow: hidden;
  }
  /deep/ .van-tab__pane {
    height: 100%;
    .scroll-wrapper {
      height: 100%;
      overflow-y: auto;
    }
  }
}
.bar_btn {
  width: 36px;
  height: 35px;
  position: absolute;
  top: 0;
  right: 0;
  &::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999;
    box-shadow: 0 0 10px #999;
    transform: scale(1, 0.6);
  }
  .van-icon-wap-nav {
    width: 100%;
    height: 100%;
    background: #fff;
    text-align: center;
    line-height: 35px;
    position: relative;
    z-index: 1000;
    &::before {
      font-size: 20px;
    }
  }
}

</style>
